 <!-- 
 @Author: Havery   
 @Date: 2021-01-11 13:58:16   
 @function:类型管理
----------------------------------------------------------  
 @Last Modified by:   LC-2021-01-11 13:58:16  
 @Modified function:xxx 
 -->
<template>
  <div>
    <el-card class="box-card card1" shadow="hover">
      <div class="searchBox">
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formSearch" class="user-search">
          <el-form-item label="搜索：">
            <el-input
              size="mini"
              v-model="formSearch.parameters"
              placeholder="输入关键字"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-search"
              @click="handleSearch()"
              >搜索</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-plus"
              @click="handleEdit()"
              >添加</el-button
            ><el-button
              size="mini"
              type="danger"
              icon="el-icon-remove"
              @click="handleRemove()"
              >删除</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card class="box-card" shadow="hover">
          <!--列表  @selection-change="selectChange" 复选-->
          <el-table
            class="ptab"
            border
            stripe
            size="small" 
            ref="multipleTable"
            :data="listData"
            highlight-current-row
            v-loading="loading"
            element-loading-text="拼命加载中"
            style="width: 99%"
            :height="tableHeight"
            @row-click="handleRowClick"
          >
            <el-table-column
              type="selection"
              align="center"
              width="55px"
            ></el-table-column>
            <el-table-column label="序号" width="55px">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>

            <el-table-column
              :show-overflow-tooltip="true"
              align="left"
              header-align="center"
              sortable
              prop="name"
              label="名称"
              width="180"
            ></el-table-column>
            <el-table-column
              align="center"
              sortable
              prop="code"
              label="简码"
              width="140"
            ></el-table-column>
            <el-table-column
              align="center"
              sortable
              prop="sort"
              label="排序"
              width="80px"
            ></el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              align="left"
              header-align="center"
              sortable
              prop="remark"
              width="340"
              label="备注"
            ></el-table-column>
            <el-table-column align="left" label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  icon="el-icon-edit"
                  class="btnBlue"
                  @click="handleEdit(scope.$index, scope.row)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="mini"
                  icon="el-icon-remove"
                  class="btnRed"
                  @click="handleRemove(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 pageparm返回的分页参数信息 pageListInfo为分页组件回掉方法-->
          <Pagination
            v-bind:child-msg="pageparm"
            @callFather="pageListInfo"
          ></Pagination>
        </el-card>
      </el-col>
    </el-row>
    <!-- 编辑等操作弹窗 -->
    <!-- role-mask 弹窗顶部下划线 v-dialogDrag可拖拽-->
    <el-dialog
      :title="editForm.formTitle"
      :visible.sync="editForm.formVisible"
      v-if="editForm.formVisible"
      width="30%"
      v-dialogDrag
      custom-class="dialog"
      :close-on-click-modal="false"
    >
      <component
        v-bind:is="curComponent"
        v-bind:formInfo="formInfo"
        @callBack="callBack"
      ></component>
    </el-dialog>
  </div>
</template>
<script>
//引用对象【不同业务，需要各玩各的。别一个界面就完成所有。业务复杂以后，搞死一堆人】
import Pagination from "@/components/common/pagination"; //分页组建
import EditForm from "./components/edit";

import FlowCategoryHttp from "@/api/flow/flowcategory"; //http

//定义变量
const {
  loadPageList, //获取分页列表
  remove, //删除
} = FlowCategoryHttp;
export default {
  //注册组件
  components: {
    Pagination, //分页
    EditForm,
  },
  data() {
    return {
      //列表相关
      loading: false, //是显示加载
      tableHeight: window.innerHeight * 0.795, //表格高度
      pageparm: { currentPage: 1, pageSize: 16, total: 0 }, //分页参数
      listData: [], //表格返回信息
      formSearch: {
        //请求数据参数
        page: 1,
        limit: 16,
        field: "sort",
        order: "desc",
        parameters: "", //关键字
      },
      curComponent: null,
      //编辑框窗体参数
      editForm: {
        formVisible: false, //窗体是否显示
        formTitle: "", //窗体标题
      },
      formInfo: {},
    };
  },
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {
  
  },
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {
    //初始化获取
    this.loadList();
  },
  /**
   * 数据发生改变
   */
  watch: {},
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    //获取数据方法
    loadList() {
      this.loading = true;
      loadPageList(this.formSearch).then((response) => {
        let data = response.data;
        if (data.Code === 1000) {
          this.listData = data.Data;
          //分页赋值
          this.pageparm.currentPage = this.formSearch.page;
          this.pageparm.pageSize = this.formSearch.limit;
          this.pageparm.total = data.Count;
        } else {
          this.$messageTip.warning(data.Msg); 
          this.listData = [];
          this.pageparm.currentPage = this.formSearch.page;
          this.pageparm.pageSize = this.formSearch.limit;
          this.pageparm.total = data.Count;
        }
        this.loading = false;
      });
    },

    //点击行触发，选中或不选中复选框
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    //分页插件事件
    pageListInfo(par) {
      this.formSearch.page = par.currentPage;
      this.formSearch.limit = par.pageSize;
      this.loadList();
    },
    //搜索事件
    handleSearch() {
      this.formSearch.page = 1;
      this.formSearch.limit = 16;
      this.loadList();
    },
    //编辑界面
    handleEdit(index, row) {
      this.editForm.formVisible = true;
      if (row != null && row != undefined) {
        this.editForm.formTitle = "修改信息";
        //不要直接赋值，不然造成-引用类型传递
        let obj = JSON.parse(JSON.stringify(row)); //row是父组件传递的对象
        this.formInfo = obj;
      } else {
        this.editForm.formTitle = "新增信息";
        this.formInfo = {};
      }

      this.curComponent = EditForm;
    },

    //删除【兼容单行删除】
    handleRemove(index, row) {
      let self = this;
      if (
        row != null ||
        (this.$refs.multipleTable &&
          this.$refs.multipleTable.store.states.selection.length > 0)
      ) {
        this.$messageTip.boxWarning("确定要删除吗?")
          .then(() => {
            let par = [];
            if (row != null) {
              par.push(row.id);
            } else {
              let selectData = self.$refs.multipleTable.store.states.selection;
              for (let index = 0; index < selectData.length; index++) {
                par.push(selectData[index].id);
              }
            }
            remove(par).then((response) => {
              let data = response.data;
              if (data.Code === 1000) {
                self.$messageTip.success(data.Msg); 
                self.loadList();
              } else {
                self.$messageTip.warning(data.Msg);
              }
            });
          })
          .catch(() => {
            this.$messageTip.info("已取消删除！");
          });
      } else {
        this.$messageTip.info("请选择删除项！"); 
      }
    },
    //从组件传回来的方法
    callBack(data) {
      this.editForm.formVisible = false;
      if (data != null && data != "") {
        this.loadList();
      }
    },
    //时间格式化
    dateFormat(row, column, cellValue, index) {
      const daterc = row[column.property];
      if (daterc != null) {
        return daterc.slice(0, 10);
      }
    },
    getTime(time) {
      var date = new Date(time);
      var y = date.getFullYear();
      var m =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var d = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return y + "-" + m + "-" + d;
    },
  },
};
</script>
    <style>
.el-tooltip__popper {
  max-width: 20%;
}
.el-tooltip__popper,
.el-tooltip__popper.is-dark {
  background: rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 24px;
}
</style>